<script setup lang="ts">
import { ref } from 'vue'
import type { previewImgType, colsType, rowsType } from './type'

const imgList = ref<previewImgType[]>([
  { id: '1', path: './images/comp/balance-module/1.png' },
  { id: '2', path: './images/comp/balance-module/2.png' },
  { id: '3', path: './images/comp/balance-module/3.png' },
  { id: '4', path: './images/comp/balance-module/4.png' }
])

const apiCols: colsType[] = [
  { title: '参数', dataIndex: 'param', width: 220 },
  { title: '类型', dataIndex: 'type', width: 150 },
  { title: '必填', dataIndex: 'required', width: 80 },
  { title: '说明', dataIndex: 'statement', ellipsis: true }
]

const apiRows: rowsType[] = [
  {
    key: '1',
    param: 'modules',
    type: 'Array',
    required: '是',
    statement: 'modules(Array[pointObject], optional)；见下面pointObject参数说明'
  },
  {
    key: '2',
    param: 'styleVal',
    type: 'Number',
    required: '是',
    statement:
      '目前提供的样式类型有效值为1~4，传入的styleVal值所对应的是组件预览图序，多种样式将继续更新敬请期待···'
  }
]

const paramsRows: rowsType[] = [
  {
    key: '1',
    param: 'pointValue',
    type: 'Number',
    required: '是',
    statement: '数量'
  },
  {
    key: '2',
    param: 'empWalletSettingsID',
    type: 'String',
    required: '是',
    statement: 'ID'
  },
  {
    key: '3',
    param: 'empWalletSettingsDisplayName',
    type: 'String',
    required: '是',
    statement: '名称'
  }
]
</script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1、组件简介</div>
        <div class="doc-text">
          <div class="text">1.1 所属项目 - 会员小程序</div>
        </div>
        <div class="doc-text">
          <div class="text">1.2 路径 - /components/balanceModule/balanceModule.vue</div>
        </div>
        <div class="doc-text">
          <div class="text">1.3 功能 - 积分展示组件</div>
        </div>
        <div class="doc-text">
          <div class="text">
            1.4 说明 -
            积分展示样式类型可供多种选择；多项积分时选择最高项积分值作为整体最高值（并非累加和），即单项积分值与最高项积分值之比（itemValue/maxValue）。
          </div>
        </div>
        <div class="doc-text">
          <div class="text">1.5 组件预览</div>
          <div class="image flex-h-sc">
            <a-image-preview-group>
              <div class="img" v-for="item in imgList" :key="item.id">
                <a-image class="img" :width="100" :src="item.path" />
              </div>
            </a-image-preview-group>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">2、使用方法</div>
        <div class="doc-text">
          <div class="text">
            <pre><code class="vue">&lt;balance-module :modules="moduleList" :styleVal="moduleStyle"&gt;&lt;/balance-module&gt;</code></pre>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">3、API</div>
        <div class="doc-tab">
          <div class="tab">
            <a-table
              :columns="apiCols"
              :data-source="apiRows"
              bordered
              :pagination="false"
              size="small"
            ></a-table>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-text">
          <div class="text">pointObject参数说明:</div>
        </div>
        <div class="doc-tab">
          <div class="tab">
            <a-table
              :columns="apiCols"
              :data-source="paramsRows"
              bordered
              :pagination="false"
              size="small"
            ></a-table>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text,
    .doc-tab {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .tab {
        margin-bottom: 10px;
      }
      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
      .image {
        @include size(100%, 100%);
        .img {
          max-width: 150px;
          margin-right: 20px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
